import React from 'react';
import { Button, Row, Col, Tooltip, message } from 'antd';
import AddList from './addList';
import CommonListsIndex from 'src/components/CommonLists/index';
import FilterTool from '../../../../components/FilterTool';

import Modal from 'src/components/Modal/index';
import { MODEL_TYPE } from 'src/utils/constant';
import ScriptEditor from 'src/components/ScriptEditor';
import services from 'src/services/api';
import Detail from './detail';

class ModelAdd extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'modelConfig';
    this.listsComponent = AddList;
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.state = {
      ...this.state,
      selectedRowKeys: [],
      selectedRows: []
    };

    this.model_width = 500;
    this.queryParams = { deploy_status: 1 };
  }
  componentDidMount() {
  }

  // 列表
  queryList(params) {
    services.modelConfig.list(params).then((res) => {
      if (res.code === 0) {
        const { list, totalCount } = res.data
        const currentPage = params.current_page
        const page = Math.ceil(totalCount / this.queryPanigation.page_size)
        if (list && totalCount && list.length === 0 && currentPage > page) {
          this.onChangePagination(page, 'current_page')
        } else {
          this.setState({
            ...res.data,
          });
        }
        // this.setState({
        //   ...res.data,
        // });
      } else {
        message.error(res.msg);
      }
    });
  }

  getColumns = () => {
    return [
      {
        title: '模型服务名称',
        key: 'deploy_name',
        dataIndex: 'deploy_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '模型名称',
        key: 'model_code',
        dataIndex: 'model_code',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '状态',
        key: 'deploy_status',
        dataIndex: 'deploy_status',
        render: (text, record) => {
          return <>{MODEL_TYPE[text]}</>;
        },
      },
    ];
  };

  showLog = (record) => {
    Modal.open({
      title: '日志',
      width: '600px',
      content: <ScriptEditor value={record.deploy_info} />,
      isOkBtn: false,
      isCancelBtn: false,
    });
  };

  addByServices = () => {
    const { selectedRows } = this.state;
    const newList = selectedRows.map(item => item.deploy_name)
    services.model.addByService({ keyword: newList }).then((res) => {
      if (res.code === 0) {
        message.success(res.msg);
        this.props.history.push('/variable/model/index');
      } else {
        message.error(res.msg);
      }
    });
  };

  detail = (record) => {
    Modal.open({
      title: '参数详情',
      width: '1000px',
      content: <Detail closeModal={this.closeModal} {...this.props} api={'modelConfig'} record={record} />,
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  render() {
    const ListsComponent = this.listsComponent;

    const data = [

      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入模型服务名称|模型名称进行搜索',
        span: 20,
      },
    ];

    // 字段选择配置
    const rowSelection = {
      columnWidth: 30,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys: selectedRowKeys,
          selectedRows: selectedRows
        });
      },
      getCheckboxProps: (record) => ({
        disabled: record.deploy_status !== 1 || record.is_used === 1,
        name: record.id,
      }),
      selectedRowKeys: this.state.selectedRowKeys,
    };
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col>请选择要添加的模型（注:本列表仅展示了在线状态的模型）</Col>
          <Col>
            <Row type='flex' justify='end' align='middle' gutter={10}>
              <Col>
                <FilterTool
                  ref='filterTool'
                  data={data}
                  colNum={1}
                  query={this.freshQueryList}
                  refreshFilter={this.refreshFilter}
                  isOnChange={true}
                  justify='end'
                  // refresh={this.resetList}
                /></Col>
              <Col>
                <Button type='primary' onClick={this.addByServices} disabled={this.state.selectedRowKeys.length === 0}>
                  添加到模型调用
                </Button>
              </Col>
            </Row>
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.props}
            {...this.state}
            rowSelection={rowSelection}
            rowKey='id'
            edit={this.edit}
            queryList={this.freshQueryList}
            clearSelected={this.clearSelected}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
            map={this.map}
            detail={this.detail}
          />
        </div>
      </div>
    );
  }
}

export default ModelAdd;
